<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
        <navigator class="return-index-btn" openType="redirect" url="/pages/index/index" v-if="data.show_index">
            <image :src="data.__wxapp_img.nav.index.url" style="width: 50upx;height: 50upx"></image>
        </navigator>
        <view class="flex-row tab-bar">
            <view class="flex-grow-1">
                <navigator :class="data.status==0?'active':''" openType="redirect" url="/pages/miaosha/order/order?status=0">
                    <text>待付款</text>
                </navigator>
            </view>
            <view class="flex-grow-1">
                <navigator :class="data.status==1?'active':''" openType="redirect" url="/pages/miaosha/order/order?status=1">
                    <text>待发货</text>
                </navigator>
            </view>
            <view class="flex-grow-1">
                <navigator :class="data.status==2?'active':''" openType="redirect" url="/pages/miaosha/order/order?status=2">
                    <text>待收货</text>
                </navigator>
            </view>
            <view class="flex-grow-1">
                <navigator :class="data.status==3?'active':''" openType="redirect" url="/pages/miaosha/order/order?status=3">
                    <text>已完成</text>
                </navigator>
            </view>
            <view class="flex-grow-1">
                <navigator :class="data.status==4?'active':''" openType="redirect" url="/pages/miaosha/order/order?status=4">
                    <text>售后</text>
                </navigator>
            </view>
        </view>
        <view class="order-list">
            <view class="no-data-tip" v-if="data.show_no_data_tip">暂无相关订单</view>
            <view class="order-item" v-for="(order,index) in data.order_list" :key="order.id">
                <navigator :url="data.status==4?'/pages/miaosha/order-refund-detail/order-refund-detail?id='+order.order_refund_id:'/pages/miaosha/order-detail/order-detail?id='+order.order_id">
                    <view class="flex-row order-info">
                        <view class="flex-grow-1">订单号:{{order.order_no}}</view>
                        <view class="flex-grow-0">{{order.addtime}}</view>
                    </view>
                    <view class="goods-list">
                        <view class="goods-item flex-row" v-for="(goods,i) in order.goods_list" :key="i">
                            <view class="flex-grow-0" style="overflow: visible">
                                <image class="goods-pic" mode="aspectFill" :src="goods.goods_pic"></image>
                            </view>
                            <view class="flex-grow-1 flex-col">
                                <view class="flex-grow-1">
                                    <view class="goods-name">{{goods.goods_name}}</view>
                                    <view class="attr-list">
                                        <view class="attr-item" v-for="(attr,ii) in goods.attr_list" :key="ii">
                                            {{attr.attr_group_name}}:{{attr.attr_name}}
                                        </view>
                                    </view>
                                </view>
                                <view class="flex-grow-0 flex-row">
                                    <view class="flex-grow-1 num">×{{goods.num}}</view>
                                    <view class="flex-grow-0 price">￥:{{goods.price}}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </navigator>
                <view class="flex-row">
                    <view class="flex-grow-1 flex-y-center">
                        <block v-if="data.status==4">
                            <block v-if="order.refund_type==1">
                                退货退款：
                                <text style="color: #ff4544">￥{{order.refund_price}}</text>
                            </block>
                            <block v-if="order.refund_type==2">
                                换货
                            </block>
                        </block>
                        <block v-else>合计：￥{{order.pay_price}}</block>
                    </view>
                    <view class="flex-grow-0 flex-y-center flex-row">
                        <block v-if="data.status==4">
                            <view v-if="order.refund_status==0">
                                <block v-if="order.refund_type==1">
                                    <block v-if="order.is_agree==0">等待处理</block>
                                    <block v-else>
                                        <block v-if="order.is_user_send==0">待买家发货</block>
                                        <block v-else>等卖家待处理</block>
                                    </block>
                                </block>
                                <block v-else>等卖家待处理</block>
                            </view>
                            <view style="color: #36ba75" v-if="order.refund_status==1">已同意并退款</view>
                            <view style="color: #36ba75" v-if="order.refund_status==2">已同意换货</view>
                            <block v-if="order.refund_status==3">
                                <view style="color: #ff4544" v-if="order.refund_type==1">已拒绝退货退款</view>
                                <view style="color: #ff4544" v-if="order.refund_type==2">已拒绝换货</view>
                            </block>
                        </block>
                        <block v-else>
                            <view class="flex-grow-1" v-if="order.is_send==0">
                                <text v-if="order.apply_delete==1">取消申请中</text>
                                <button @tap="orderRevoke" class="order-option-btn" :data-id="order.order_id" v-else>取消
                                </button>
                            </view>
                            <view class="flex-grow-1" v-if="order.is_pay==0&&order.pay_type!=2">
                                <button @tap="orderPay" class="order-option-btn" :data-id="order.order_id" :data-index="index">付款</button>
                            </view>
                            <view class="flex-grow-1" v-if="(order.is_pay==1||order.pay_type==2)&&order.is_offline==1&&order.is_send==0&&order.apply_delete==0">
                                <view @tap="orderQrcode" class="order-option-btn clerk flex-y-center" :data-index="index">
                                    <image :data-index="index" :src="data.__wxapp_img.dapp.clerk.url" style="width:26upx;height:26upx;margin-right:10upx"></image> 核销码
                                </view>
                            </view>
                            <view class="flex-grow-1 flex-row" v-if="order.is_send==1&&order.is_confirm==0">
                                <view class="flex-grow-0" v-if="order.express">
                                    <navigator class="order-option-btn" :url="'/pages/miaosha/express-detail/express-detail?id='+order.order_id">物流
                                    </navigator>
                                </view>
                                <view class="flex-grow-0">
                                    <button @tap="orderConfirm" class="order-option-btn" :data-id="order.order_id">确认收货
                                    </button>
                                </view>
                            </view>
                            <view class="flex-grow-1" v-if="order.is_send==1&&order.is_confirm==1&&order.is_comment==0&&__is_comment">
                                <navigator class="order-option-btn" :url="'/pages/miaosha/order-comment/order-comment?id='+order.order_id" v-if="data.__is_comment">评价
                                </navigator>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </view>
        <view @tap="hide" :class="['flex-row flex-y-center modal', data.hide==1?'hide':'']">
            <view class="flex-y-center" style="width:100%;height:800upx;padding:100upx;">
                <view style="background-color:#fff;width:100%;height:100%;border-radius:10upx;padding:0 50upx;">
                    <view class="flex-x-center" style="width:100%;height:50upx;margin-top:50upx;font-size:13pt;margin-bottom:20upx">核销二维码</view>
                    <image :src="data.qrcode" style="width:450upx;height:450upx;"></image>
                </view>
            </view>
        </view>
    </view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = !1, e = !1, o = 2;

	export default {
		data() {
			return {
				data: {
        status: 0,
        order_list: [],
        show_no_data_tip: !1,
        hide: 1,
        qrcode: ""
    },
			};
		},
		onLoad: function(a) {myVue = this;
        myVue.getApp.page.onLoad(this, a);
        var s = this;
        t = !1, e = !1, o = 2, s.loadOrderList(a.status || 0), getCurrentPages().length < 2 && s.setData({
            show_index: !0
        });
    },
		onReachBottom: function(a) {
        myVue.getApp.page.onReachBottom(this);
        var s = this;
        e || t || (e = !0, myVue.getApp.request({
            url: myVue.getApp.api.miaosha.order_list,
            data: {
                status: s.data.status,
                page: o
            },
            success: function(e) {
                if (0 == e.code) {
                    var a = s.data.order_list.concat(e.data.list);
                    s.setData({
                        order_list: a
                    }), 0 == e.data.list.length && (t = !0);
                }
                o++;
            },
            complete: function() {
                e = !1;
            }
        }));
    },
		onShow: function(t) {
        myVue.getApp.page.onShow(this);
    },
		methods: {
			loadOrderList: function(t) {
        void 0 == t && (t = -1);
        var e = this;
        e.setData({
            status: t
        }), myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.miaosha.order_list,
            data: {
                status: e.data.status
            },
            success: function(t) {
                0 == t.code && e.setData({
                    order_list: t.data.list
                }), e.setData({
                    show_no_data_tip: 0 == e.data.order_list.length
                });
            },
            complete: function() {
                e.getApp.core.hideLoading();
            }
        });
    },
		orderRevoke: function(t) {
        var e = this;
        myVue.getApp.core.showModal({
            title: "提示",
            content: "是否取消该订单？",
            cancelText: "否",
            confirmText: "是",
            success: function(o) {
                if (o.cancel) return !0;
                o.confirm && (myVue.getApp.core.showLoading({
                    title: "操作中"
                }), myVue.getApp.request({
                    url: myVue.getApp.api.miaosha.order_revoke,
                    data: {
                        order_id: t.currentTarget.dataset.id
                    },
                    success: function(t) {
                        e.getApp.core.hideLoading(), e.getApp.core.showModal({
                            title: "提示",
                            content: t.msg,
                            showCancel: !1,
                            success: function(t) {
                                t.confirm && e.loadOrderList(e.data.status);
                            }
                        });
                    }
                }));
            }
        });
    },
    orderConfirm: function(t) {
        var e = this;
        myVue.getApp.core.showModal({
            title: "提示",
            content: "是否确认已收到货？",
            cancelText: "否",
            confirmText: "是",
            success: function(o) {
                if (o.cancel) return !0;
                o.confirm && (myVue.getApp.core.showLoading({
                    title: "操作中"
                }), myVue.getApp.request({
                    url: myVue.getApp.api.miaosha.confirm,
                    data: {
                        order_id: t.currentTarget.dataset.id
                    },
                    success: function(t) {
                        e.getApp.core.hideLoading(), e.getApp.core.showToast({
                            title: t.msg
                        }), 0 == t.code && e.loadOrderList(3);
                    }
                }));
            }
        });
    },
    orderQrcode: function(t) {
        var e = this, o = e.data.order_list, a = t.target.dataset.index;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), e.data.order_list[a].offline_qrcode ? (e.setData({
            hide: 0,
            qrcode: e.data.order_list[a].offline_qrcode
        }), myVue.getApp.core.hideLoading()) : myVue.getApp.request({
            url: myVue.getApp.api.order.get_qrcode,
            data: {
                order_no: o[a].order_no
            },
            success: function(t) {
                0 == t.code ? e.setData({
                    hide: 0,
                    qrcode: t.data.url
                }) : e.getApp.core.showModal({
                    title: "提示",
                    content: t.msg
                });
            },
            complete: function() {
                e.getApp.core.hideLoading();
            }
        });
    },
    hide: function(t) {
        this.setData({
            hide: 1
        });
    },
		},
	}
</script>

<style scoped>
.tab-bar {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    z-index: 1000;
}

.tab-bar~.order-list {
    padding-top: 100upx;
}

.tab-bar navigator {
    display: block;
    padding: 0 24upx;
    text-align: center;
}

.tab-bar navigator text {
    height: 100upx;
    line-height: 100upx;
    display: inline-block;
}

.tab-bar navigator.active text {
    color: #f00;
    border-bottom: 2upx solid #f00;
}

.order-list .order-item {
    background: #fff;
    padding: 32upx 24upx;
    margin-bottom: 20upx;
    border-bottom: 1upx solid #e3e3e3;
}

.order-list .order-info {
    font-size: 9pt;
    color: #888;
}

.goods-item {
    background: #fff;
    border-bottom: 1upx solid #e3e3e3;
    padding: 32upx 0;
    border-bottom: 1upx solid #eee;
    margin: 20upx 0;
}

.goods-item:first-child {
    border-top: 1upx solid #eee;
}

.goods-item .goods-pic {
    width: 156upx;
    height: 156upx;
    margin-right: 20upx;
}

.goods-item .goods-name {
    margin-bottom: 10upx;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.goods-item .attr-list,.goods-item .num {
    font-size: 9pt;
    color: #888;
}

.goods-item .attr-list .attr-item {
    display: inline-block;
    margin-right: 36upx;
}

.goods-item .attr-list .attr-item:last-child {
    margin-right: 0;
}

.goods-item .price {
    color: #ff4544;
}

.order-option-btn {
    border: 1upx solid #bbb;
    background: #fff;
    border-radius: 10upx;
    height: 60upx;
    line-height: 60upx;
    color: inherit;
    margin-left: 30upx;
    padding: 0 30upx;
}

.order-option-btn::after {
    display: none;
}

.return-index-btn {
    position: fixed;
    right: 0;
    bottom: calc(100upx + var(--window-bottom));
    display: inline-block;
    background: rgba(157,157,157,0.5);
    padding: 10upx 20upx;
    z-index: 1000;
    border-radius: 10upx 0 0 10upx;
}

.hide {
    display: none;
}

.modal {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}
</style>
